<template>
    <div class="demo">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    // export default Vue.extend({
    //     data() {
    //         return {
    //             schoolName: '赛博坦高等学校',
    //             address: '赛博坦'
    //         }
    //     },
    //     methods: {
    //         showName() {
    //             alert(this.schoolName)
    //         }
    //     }
    // })
    // 注意:Vue.extend可以简写为对象形式
    export default {
        name:'School',
        data() {
            return {
                name: '赛博坦高等学校',
                address: '赛博坦'
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        }
    }
</script>

<style>
    .demo {
        background-color: orange;
    }
</style>